Le HTML5 
la force et la souplesse du web

Dans le cadre de l'évolution de l'HTML et de ces différentes versions depuis 1994, le HTML5 est une synthèse perspicace et perçus par ses nombreux utilisateurs dans le monde comme un aboutissement par rapport à l'ensemble de ses versions précédentes. 

Même si le langage est moins formaliste que le XHTML (la version le précédent), c'est à dire soumis au strict respect de son interprétation aux navigateurs (firefox, edge, chrome, opéra,..) le code doit être, néanmoins propre et sans faute, comme l'ensemble de sa syntaxe par exemple: (une virgule, un point de suspension, un point virgule).

Le HTML5, est une simplification des versions  précédents du code et il y a séparation entre d'une part, l'HTML5 (le contenu) et les CSS (la présentation) ce qui entraîne que les feuilles de styles de type CSS3 sont un élément indissociable de l'HTML5, qui, elles influent directement sur la mise en page et plus globalement sur l'interface graphique.  

Le code JavaScript est, contrairement à l'HTML pas un langage à balise, ni comme les CSS3, un langage de présentation mais un langage de programmation orienté objet. Le triptique finale que représente ces trois codages informatiques complémentaires performants et solides, donnent un résultat satisfaisant sur beaucoup de rivale (frameworks) avec surtout un aspect non négligeable: la reconnaissance et l'approbation des organismes internationnaux W3C en tant que normes et non d'ersatzs de langage (jquery, angular, etc, ect.) Seul ombre au tableau, ils s'écrivent en anglais et la connaissance du vocabulaire et de sa traduction sont indispensable. Cependant, avec une centaine de mots, l'ont maîtrisent le problème et avec l'habitude, cela devient un véritable jeu vidéo.
 Dans ce tryptique, l'on retrouve, les éléments nouveaux :

-html5
le doctype simplifié 
le multimédia (audio et video)
etc.
-css3
bord arrondis
bordures
polices personnalisées
présentation en colone
ombres
dégradés de couleurs
arrière plan
opacité ou transparence
transformations
transitions
etc..
applications javascript api
géolocalisation
gestion de cookies à forte capacités
visualisation hors connexion
connection bidirectionnelle asynchrone
glisser / déposer
editeur en ligne
etc..
++++++++++++++++++++++++++++++++++++++
Le langage à balise

-les balises
elle sont enfermée dans deux crochets <> comme par exemple en ouverture <b>  b pour bold qui signifie gras en anglais et </b> en fermeture, avec une barre oblique. Sinon, il existe un autre exemple <i> et </i> qui indique Italique. Puisque HTML5 est un langage de contenu l'on peut considérer que par exemple la phrase: 
"Comprendre le langage est important"
"S'écrit de cette façon comme s'il était traduit de l'anglais au français" :
<gras>Comprendre</gras> le langage est <italique>important</italique>
donne: 
<b>Comprendre</b> le langage est <i>important</i>
Pour l'instant, c'est aussi simple que cela, il y a toujours une balise d'ouverture: le contenu; puis une de fermeture avec une autre balise. Cependant, il existe quelques rares exceptions notamment la balise <img> où il n'y a pas de balise de fermeture, mais un espace une barre oblique et un crochet à la fin de la balise.
Quelques balises et leurs traductions: 
<b> pour "bold" : gras
<i> pour "italic" : italique
<p> pour "paragraph" : paragraph
<div> pour "div" : division
<table> pour "table" : tableau
<form> pour "form" : formulaire
<img> pour "img" : image

-Les attributs
Parfois il existent des compléments à la balise avec des spécifications. Comme par exemple:  <balise attribut="valeurs 
comme par exemple la balise image <img>
qui s'écrit : 
<img src="" width="" height="" alt="" />
et qui veut dire à peu près la chose suivante :
<balise image; source=""; largeur de l'image="" ; hauteur de l'image="" ; alternative texte="" />
l'attribut comporte toujours une valeur, il doit être placé avant le signe égal (=) et la valeur enfermé entre deux guillements ""
dans l'exemple ci-dessus, il y a plusieurs attributs, ce n'est pas rare en HTML5. 
-le détail des attributs
L'on retrouve souvent dans le détail des attributs:
src="" pour source
width="" pour largeur du contenu
height="" pour hauteur du contenu
title="" pour étiquette ou infobulle (qui s'inscrit dans le navigateur au survol de la souris)

+++++++++++++++++++++++++++++++
Comment démarrer ?

Vous n'avez pas besoin pour commencer à travailler sur vos pages à l'aide d'un logiciel couteux ou d'une petite application qui va tracer votre page. Pour bien faire utiliser un simple traitement de texte car l'important est d'avoir un texte brut sans aucune mise en page.
Pour Windows 10, vous pouvez utiliser le bloc- notes ou notepad en cliquant sur le bureau avec l'icône windows : Programmes, Accessoires windows, Blocs-notes.
Ce traitement de texte simple est parfait pour coder vos pages, et pour autant, vous devez vous assurez d'une chose, toujours pour votre document, enregistrez votre travail sous le "nom_de_fichier point html ou htm (.html ou .htm) par ailleurs bien vérifier que vous avez choisis l'option "tous les fichiers" et sélectionné UTF-8 comme type d'encodage (charset).

Le document HTML5 classique contient :
doctype
le doctype ou DTD ce sont les deux premières balises d'un doument html,  elles comportent les informations du document, à la fois, le type du document et sa langue, en l'occurence ici le français.
ça donne ceci :
C'est ainsi que pour un doctype le plus minimal possible l'on code ainsi: 
<!DOCTYPE html>
<html lang="fr 
<head>
...
</head>

L'entête
La balise <head>...</head> que l'on appelle l'entête du document HTML5, contient les informations relatives au document. Dans l'entête l'on trouve des informations de nature très diverses, mais où ne figure pas le contenu se trouvant lui, entre les balises <body> et </body> avec l'intégralité de votre page qui apparait dans le navigateur.
- le titre du document <title>...</title>
- des déclarations ou des liens à des feuilles de style CSS
- des fonctions ou des liens venant de fichiers JavaScript
-des informations à l'intentions des moteurs de recherche
- des informations à l'intention des navigateurs

Comme le javascript est le langage par défaut
Ainsi, pour définir un script java inclut entre les balises <head> et </head> il suffit juste de le stipuler par<script>...</script> ou bien par <script src="js/fichier.js </script>
pour les CSS
<style>...</style>
<style rel="stylesheet" href="css/style.css </style>
La balise <title>...</title> est la seule obligatoire, le titre se retrouve dans l'onglet de la page sur le navigateur comme exemple:
<title>Magasin</title>
L'encodage du document
Pour déterminer les jeux de caractères de l'alphabet utilisé dans le document HTML5 l'on utilise des encodages (le charset en anglais).
ASCII : le plus utilisé mais, il faut néanmoins encoder les caractères accentués et spéciaux du genre &eacute pour le é, et &egrave pour è, &euro pour €.

WINDOWS-1252: Le Jeu de caractères pour les applications windows mais il provoque souvent des problèmes de compatibilté avec les autres systèmes d'exploitation autre que windows.

ISO-8859-1: Codage par défaut dans l'europe de l'ouest et bonne compatibilté avec beaucoup de système.
UTF-8: Le meilleur et le futur, car valide quasiment dans le monde entier. c'est celui-là que nous utiliserons.
Pour coder la balise du jeu de caractère la plus compatible
Voici comment procéder :
<meta charset ="iso-8859-1 />  ou sinon
<meta charset="utf-8" /> 
Notre document minimal HTML5 devient alors:  
<!DOCTYPE html>
<html lang="fr 
<head>
<title>HTML 5</title>
<meta charset="utf-8" /> 
</head>
...
La balise body 
<body>
Appeller également le corps du document cette balise contient les données du documents, le contenu de la page.
Donc au final, notre page avec son entête et son corps (vide) l'on peut le coder ainsi:
<!DOCTYPE html>
<html lang="fr 
<head>
<meta charset="utf-8" /> 
<title>HTML 5</title>
</head>
<body>
...
</body>
</html>

Pour la validation du code
votre code afin d'être bien conforme doit pour être parfait passer sour le regard d'un validateur, une sorte de site avec un logiciel qui permet de vérifier s'il ne contient aucune erreur, si le code est inccorecte il fourni à l'utilsateur un rapport qui détermine où se trouve la ou les erreurs, cependant le rapport est parfois très technique. 
Il en existe plusieurs: 
Le W3C le plus connu mais en anglais: 
(validator.w3c.org)
Le validateur du w3 Québec
Un validateur en français http://www.w3qc.org/validateur

Le validateur validator.nu
http://html5.validator.nu

Approche avec 
les feuilles de styles

Dans un document HTML5, pour faire apparaître la présentation de la balise, il faut la désigner dans le document HTML. 
Notre premier travail sera donc de créer un document styles.css avec le bloc-notes avec l'option ANSI, et de coder la première ligne avec :  
p { text-align:center; }
Notez que l'on retrouve le sélecteur de base,  ici, p et ensuite la propriété et sa valeur.
Il aurait pu s'agir d'un sélecteur de classe un point et de son nom  (.presentation) ou d'un sélecteur d'identifiant # et de son nom. #toto, (nous y reviendrons un peu plus tard...)
Enregistrer votre travail
-----------------------------------------------
Retournez dans le document HTML5 que vous avez enregistrez précédement:
Qui contient :
<!DOCTYPE html>
<html lang="fr 
<head>
<meta charset="utf-8" /> 
<title>HTML 5</title>
</head>
<body>
...
</body>
</html>
Entre les balises <body> et </body>
<p> Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
Donc, nous avons dans notre fichier index.html :
<!DOCTYPE html>
<html lang="fr> 
<head>
<meta charset="utf-8"> 
<title>HTML 5</title>
</head>
<body>
<p>  Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
</body>
</html>
Ouvrez la page index.html dans votre navigateur avec un double clic dans l'explorateur de fichiers ou un glissé/déposé dans la fenètre du navigateur. Le résultat dans le navigateur est un texte d'une ligne centré dans la page.
et dans notre fichier styles.css :
p { text-align: center; }

Les propriétés de style
Dans les CSS3, elles se composent de deux éléments: la propriété et sa valeur
par exemple :
text-align:center;
Qui pourrait dire en français : alignement de texte: au centre; 
Donc :
La propriété="text-align" et la valeur="center"
la propriété est désigné avec ses deux points (:) vers la valeur, et la valeur est fermée par un point virgule (;) si vous ne respectez pas cela, ça ne fonctionne pas. 
Les sélecteurs
Il en existe de plusieurs types:
Accroché à une base
Accroché à une balise simple (<p> est une balise de paragraphe). Ici en l'occurence le résultat dans le navigateur, présente l'ensemble des balises <p> dans votre document centrée.
p { text-align: center; }
Notez, que des accolades enferment toujours les propriétés de style et ses valeurs.
Accroché à un sélecteur de classe
.nom_de_classe { text-align: center; }
soulignez le point avant le non de la classe
dans notre exemple, cela aurait pu donner:
.presentation { text-align : center; } dans le fichier styles.css

et dans le fichier index.html
<p class="presentation">Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
Ce qui aurait donné un résultat, similaire.

Accroché à un nom d'identifiant
#nom_de_lidentifiant { text-align: center; }
là aussi, il faut préciser le hastag précédent son nom, puis l'accolade ouvertes, la propriété la ponctuation, sa valeur, autre ponctuation, et enfin l'accolade qui se referme.
Donc, ce qui aurait donné avec cet exemple
dans le fichier CSS
#présentation { text-align: center; }
et dans le fichier index.html
<p id="presentation">Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
Noter que l'on fait représenter, ici id (pour identififiant) puis son nom (presentation)

Reprenons nos fichiers
index.html et styles.css
Rajoutons dans le fichier styles.css
la propriété de style "font-size: 22px;" à la suite de la propriété précédente.
ce qui donne :  
.presentation { text-align:center;
                          font-size: 22px;   }
font-size : 22px;
propriétés ="taille des caractères" a une valeurs="de 22px"; px, étant l'abréviation de pixel.

Avec pour résultat dans le navigateur, non seulement le texte est centré mais la taille des caractères est de 22 pixels.
Donc, ce que l'on observe c'est que:
que l'on peut donner plusieurs propriétés de style à un selecteur, de base, de classe ou d'identifiant et que ces propriétés, ponctuées par des signes qui sont toujours les mêmes, : ;  sont, toujours "encapsulés" entre deux accolades une qui ouvre, une qui ferme { }.
Pour finir, lorsque l'on veut intégrer des propriétés CSS dans une page HTML. Il exsite trois solutions.
- l'on déclare le fichier CSS par un lien entre les balises <head> et </head> comme vue précédemement
ce qui donne: 
<style rel="stylesheet" href="css/styles.css </style>
- soit, elle est ajoutée directement dans la balise en stipulant avec la propriétés style ses autres propriétés et valeurs. 

Ce qui donne par exemple:
<p style="text-align: center; font size: 22px;"> 
-soit la déclaraton de style se fait dans l'entête du document HTML5 placée entre les balises <head> et </head>.
<style type="text/css 
.nom_de_class { text-align: center; 
				 font-size: 22px;  }
</style>

Les premières balises 
de texte (HTML)

Gras 	       <b>Gras</b> Gras
Italique 	<i>Italique</i> 	Italique
Souligné 	<u>Souligné</u> 	Souligné
Le passage à la ligne: 
<br>
en exposant et en indice:
<sup>...</sup> et
<sub>...</sub>
exemple :
a+b<sup>2</sup> = a <sup>2</sup>+2ab +b<sup>2</sup><br>H<sub>2</sub>O
le texte barré <del>...</del>
exemple:
Au prix exceptionnel de 29.99 au lieu de <del>34,99</del>
la direction du texte
certains systèmes d'écriture s'écrivent de droite vers la gauche tels que l'hébreux ou l'arabe alors le latin s'écrit de la gauche vers la droite. Le HTML5 se devait, en étend un langage universel de le préciser à l'aide de cette balise et cette façon de spécifier.
<bdo>...</bdo> indique le sens de l'affichage du texte, de la droite vers la gauche et de la gauche vers la droite.
les attributs sont :
dir="ltr" (left to right) pour gauche vers la droite et :
dir="rtl" (right to left) pour droite vers la gauche.
Ce qui donne comme exemple: 
<bdo dir="ltr"> La tartiflette cela rend moins bête</bdo>
<bdo dir="rtl"> La tartiflette cela rend moins bête</bdo>
Annexes
Les commentaires
On peut les préciser partout dans l'entête comme dans le corps du document entre <head> et </head> ou <body> et </body>
<!--commentaires en particuliers -->

Les caractères spéciaux
< &lt;
> &gt;
" &quot;
& &amp;
é &eacute;
è &agrave;
ê &eacirc;
à &agrave;
€ &euro;
espace insécable &nbsp;
Tous ces caractéres ne sont nécéssaires qu'a partir du moment où vous utilisez un encodage (charset) iso-8859-1.
Vérifier bien le point virgule final, il est obligatoire.
Séparateur horizantaux
<hr>
Les titres
Ceci sont des prototypes de taille de caractère prédéfinis, on les utilise comme titre. Ils s'affichent en gras.
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>

Les listes
A puce ou non-ordonnées
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Les listes ordonnées
Elles apparaissent sous la forme de liste numérotés:
<ol>
<li>Liste ordonné</li>
<li>Liste ordonné</li>
<li>Liste ordonné</li>
</ol>

Résultat :
1.Liste ordonné
2.Liste ordonné
3.Liste ordonné

Les listes imbriquées
<ol>
<li>Les toutous</li>
<ul>
<li>titi</li>
<li>tutu</li>
<li>tata</li>
</ul>
</ol>
Les premières déclarations
 de texte (CSS)

Toujours, avec le principe du sélecteur et de la déclaration contenant propriété et sa valeur; en voici quelques-une qui permettent d'aborder le problème sereinement.

Le texte:

font-weight:bold;
épaisseur caractère ="gras";
ou
font-weight:normal;
épaisseur caractère ="normal";
Style
font-style:italic;
style de caractère="italic"
ou
font-style:normal;
style de caractère="normal"
Taille
font-size:22px;
taille de caractère="22px"
Notez que la taille est précisée en pixel, c'est "l'unitée" la plus répandu, Il existe également le em, mais je vous conseil le pixel comme unité de mesure, autant rester sur cette base...
Décoration
text-decoration: none;
décoration du texte="aucune";

text-decoration: underline;
décoration du texte="souligné";

Alignement
text-align: center;
alignement du texte="au centre"
text-align: left;
alignement du texte="à gauche"
text-align: right;
alignement du texte="à droite"
text-align: justify;
alignement du texte="justifié"

Couleur
Il existe deux façon de coder des couleurs soit en mode de langue anglaise ou en corespondance: Voicin en partie le code en langue anglaise:

color: red; 
texte de couleur="rouge"
color: green; 
texte de couleur="vert"
color: pink; 
texte de couleur="rose"
color: black; 
texte de couleur="noire"
color: blue; 
texte de couleur="bleu"
Notez comme dit précédement que l'on peut aussi utiliser une palette plus importante de couleur en hexadécimal. En voici un échantillon.
la syntaxe est la suivante:
color: #000000;
couleur="dièse,zéro,zéro,zéro,zéro,zéro,zéro"
ce qui donne :
texte de couleur="noir";

Les couleurs de correspondance:
#808080 Gris 1 
#999999 Gris 2 
#A0A0A4 Gris 3 
#C0C0C0 Gris 4
#FFFBF0 Gris 5
#FFFFFF Gris 6
#660000 Rouge 1 
#663300 Rouge 2 
#808000 Rouge 3 
#006600 Vert 4 
#003333 Vert 5 
#000099 Vert 6 
#000066 Bleu 7 
#330066 Bleu 8 
#660033 Bleu 9 
#800000 Rouge 10  
#993300 Rouge 11
#996600 Rouge 12 
#008000 Vert 13  
#006666 Vert 14 
#0000FF Vert 15 
#000080 Bleu 16  
#660099 Bleu 17  
#CC0099 Bleu 18 
#990000 Rouge 19  
#CC6600 Rouge 20  
#CC9900 Rouge 21  
#009900 Vert 22  
#008080 Vert 23  
#0066FF Vert 24  
#003399 Bleu 25  
#9900CC Bleu 26  
#CC0099 Bleu 27  
#CC0000 Rouge 28  
#FF6600 Rouge 29  
#FFCC00 Rouge 30  
#00CC00 Vert 31 
#009999 Vert 32  
#0099FF Vert 33  
#0033CC Bleu 34  
#CC00FF Bleu 35  
#FF00CC Bleu 36  
#FF0000 Rouge 37  
#FF6666 Rouge 38 
#FFFF00 Rouge 39 
#00FF00 Vert 40 
#00CCCC Vert 41 
#00CCFF Vert 42 
#3366FF Bleu 43 
#CC33FF Bleu 44 
#FF00FF Bleu 45  
#FF6666 Rouge 46 
#FF9900 Rouge 47 
#FFFF66 Rouge 48 
#66FF66 Vert 49 
#66CCCC Vert 50 
#66FFFF Vert 51 
#3399FF Bleu 52 
#CC99FF Bleu 53 
#FF99FF Bleu 54 
#FF9999 Rouge 55 
#FF9966 Rouge 56 
#FFFF99 Rouge 57 
#99FF99 Vert 58 
#66FFCC Vert 59 
#99FFFF Vert 60 
#66CCFF Bleu 61 
#CC99FF Bleu 62 
#FF99FF Bleu 63 
#FFCCCC Rouge 64 
#FFCC99 Rouge 65 
#FFFFCC Rouge 66 
#CCFFCC Vert 67 
#99FFCC Vert 68 
#CCFFFF Vert 69 
#99CCFF Bleu 70 
#CCCCFF Bleu 71 
#FFCCFF Bleu 72
Lors de leur utilisation veiller au point virgule après la valeur, c'est impératif.

Pseudo-classe de paragraphe

Elle permet de définir une taille pour la première et uniquement la première lettre d'un paragraphe. 
.lettrage:first-letter  { margin-right: 5px;
					   font-size: 36px;    }

Insérer un contenu
Les pseudos-classes after et before permettent  d'insérer un contenu avant ou après une balise avec l'aide de content qui détermine le contenu.
h1:before {content: url (arrow.gif); }
ou
h1:after {content: url (xml.gif); }
Dans cette exemple le contenu est une image de petite taille, cela aurait très bien pu être une autre forme de contenu. Bloc de texte, boite, image de grande taille, etc..
++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++
Les liens en HTML
Dans le corps de vore document HTML5 pour naviguer il vous faut des liens avec des destinations :
+++++++++++++++++++++++++++++++++++++

Dans le même document html
Soit; à l'intérieur de votre document HTML5
il faut le déclarer au préalable.
c'est très simple, préciser par exemple dans une balise paragraphe <p>
<p id="cible-document">
C'est le document que je souhaitais vous transmettre docteur, il me semble très intéressant...
</p>
Puis, le lien dans la même page, avec lequel vous voulez le dirigez
<a href="#cible-document" title="Mon  document">Si vous cliquez sur ce lien vous vous dirigerez vers un endroit précis dans ce même document</a>
Notez que toujours il y a le caractère diese suivit de la cible. Ici: cible-document.

+++++++++++++++++++++++++++++++++++++
Dans un autre fichier html 
soit; avec le lien dans le fichier index.html qui dirige vers un autre fichier.html

<a href="fichier-b.html" title="Mon  document">Si vous cliquez sur ce lien, vous vous dirigerez vers la page b du site</a>

Vous remarquerez la propriété title="Mon document" qui affiche une étiquette au passage de la souris sur le lien. Par ailleurs, la balise de fermeture est: </a>.
+++++++++++++++++++++++++++++++++++++
Endroit précis dans un autre fichier html
soit le lien qui vous permet de cibler un point précis dans votre document dans une autre page
Au préalable le fichier cible comme nous l'avons vu, il faut le déclarer
<p id="#cible-document">
C'est le document que je souhaitais vous transmettre docteur, il me semble très intéressant...
</p>
Puis, le lien dans la page index.html par exemple, avec lequel vous voulez vous dirigez vers la cible en l'occurence ci-dessus : #cible-document.
puis 
<a href="fichier-b.html#cible-document" title="Mon  document">Si vous cliquez sur ce lien vous vous dirigerez dans l'endroit précis du document cible de la page B du site</a>

+++++++++++++++++++++++++++++++++++++
 
Site externe
<a href="http://www.terminal-media.fr/index.html" title="liens cers terminal-media.fr sur le world wide web avec le protocole http">Le lien en externe du site</a>
+++++++++++++++++++++++++++++++++++++
Téléchargement de fichier
soit vers un fichier à télécharger
Le lien dans un document externe à la page qui se code ainsi:

<a href="ma_musique.mp3" title="Mon  document">Si vous cliquez sur ce lien vous vous dirigerez vers mon sonore au format mp3</a>
+++++++++++++++++++++++++++++++++++++
boite email

Pour se diriger vers une boite email, la syntaxe est la suivante:

<a href="mailto:votre_email@fournisseur.fr" title="Votre boite mail">En cliquant sur ce lien vous pourrez m'envoyer un email></a>
++++++++++++++++++++++++++++++++++++
Les pseudos-styles de liens
Les peudos classe de liens sont un classique 
a:link { text-decoration: none; color: green; }
Elles permettent avec le sélecteur <a> de déclarer pour link (lien) avec aucune décoration de texte et la couleur verte. 
a:visited { text-decoration: line-trought; color: red; }
Elles permettent avec le sélecteur <a> et visited de déclarer (le lien visité) avec une décoration de texte barré et la couleur rouge. 

a:hover  {  text-decoration: underline;
                  font-weight: bold;
                  font-style: italic;
                  font-size: 18px ; }
Elles permettent avec le sélecteur <a> et hover de déclarer (au survol de la souris) une décoration un texte gras, en italique et une taille de caractère de 18 pixels. 

Elles permettent ici avec le sélecteur <a> de déclarer pour link (lien) décoration de texte aucun et de couleur vert. 

++++++++++++++++++++++++++++++++++++
Annexes, précisions et détails
Pour obtenir une ouverture d'une page dans une nouvel onglet indiquez dans la balise de lien la propriété.  
soit: 
target="_self" qui est celle par défaut
ou 
target="_blank" la page cible s'ouvre dans une nouvelle fenêtre, un nouvel onglet dans le navigateur.
Arborescence et dossier
Par ailleurs, dans un lien vers une autre page et dans un soucis d'organisation, il faut une arborescence avec une nomenclature de type de fichier ou des noms de dossier générique, c'est ainsi plus clair et plus lisible.
j'ai l'habitude de travailler avec la hiéarchie des dossiers suivant:
par exemple dans: 
le dossier travail

Qui est le dossier racine c'est dire à la base du projet.
Où se trouve les deux fichiers de référence
index.htm et index.html et où se trouve, la liste des dossiers suivants :

Le dossier audio
Qui contient un sous-dossier mp3
dont le nom est l'extension de ce type de fichier audio très pratique (nous y reviendrons, plus tard...)

Le dossier css
Nos fichiers texte de feuille de style
qui contient tous les fichiers .css

Le dossier js 
Qui contient tous les fichiers JavaScript avec
l'extension .js

Un dossier images
Qui contient les images pour les diaporamas par exemple.

Le dossier interface
Qui contient les images, les pictogrammes, les icones de l'interface graphique (nous y reviendrons plus tard...)
Le dossier html
Qui contient les fichiers html les plus courants.

Le dossier datas
Qui contient les dossiers où se trouvent des sujets divers. (ça peut être des chapitres, des séquences, s'il y a de nombreux fichiers) 

Le dossier video
Qui contient les sous-dossiers avec les extensions des principaux formats. mp4 
webm et ogv, cependant le format H264 (extension .mp4) semble être celui universel et approuver par l'ensemble des acteurs de l'industrie, l'on peut donc l'adopter comme le seul recevable même avec le souci du téléchargement car ce n'est pas un fichier "streamé" mais "uploader" au préalable avant d'être joué, ce qui fait de lui, un économisateur d'énergie éléctrique cotés serveur non négligeable.
Le dossier fonts 
Qui veut dire "police de caractères" en anglais contients l'ensemble des fichiers qui permettent l'affichage des caractères avec une police particulière il en existe des milliers sur certain sites spécialisés gratuites ou payante (nous y reviendrons...)
++++++++++++++++++++++++++++++++++++
Par ailleurs, pour chacun des fichiers html qui contiennent des images quand elles sont utilisées comme illustration avec une page, elles doivent, pour bien faire, se trouver dans le dossier enfant images.
Ce qui évite le fait que les fichiers et les images ne soient mélangés et rendent la visibilité difficile à leur consultation et leur gestion.
Détails et chemins dans les liens
Avec un lien d'une page à une autre situé dans le même dossier.
La syntaxe est:
<a href="fichier-a.html" title="lien">Le lien dans le même dossier</a>
Avec un lien dans une page vers une autre situé dans le dossier-a
La syntaxe est :
<a href="dossier-a/fichier-a.html" title="lien">Le lien dans le fichier html du dossier-a</a>
 
Avec un lien dans une page vers une autre situé dans le dossier-a/dossier-b
La syntaxe est :
<a href="dossier-a/dossier-b/fichier-b.html" title="lien">Le lien dans le fichier html du dossier-a/dossier-b</a>
Le chemin des liens correspondent bien aux noms des dossiers. Sans oublier le fichier de destination.
Ainsi de suite...
Cependant, pour le fichier se trouvant dans le dossier-b pour accéder au fichier qui se trouve à la racine index.html, il faut redescendre de deux niveaux, pour cela l'on utilise donc deux points et la barre oblique. 
Donc du dossier-b vers index.html
<a href="../../index.html" title="lien">Le lien dans le fichier-b.html est dans le dossier-b vers index.html</a>
+++++++++++++++++++++++++++++++++++
Les images 
et les 
images d'arrières-plans
Pour le web, il existe trois formats d'images principaux. le format est un type de fichiers possédant ses propres caractéristiques disctintes et peut-être utilisé néanmoins avec la même intention dans une page.
Voici les diffrerends types d'images pour le web de l'HTML5.
Gif  : Elles peuvent soit être animées (reconstitués en séquences de plusieurs images) ou être fixes mais toujours dotés d'un nombre maximal de 256 couleurs. Utile pour créer des interfaces, leurs poids en octets et kiloctets, sont en général assez léger. Pratique pour un affichage rapide même sans réseau à haut débit alors que les zones d'accès à internet restant inégaux sur la planète. Pourtant au détriment de leur poids leur codage entraîne parfois une perte de qualité. L'extension est .gif
Jpeg : Codage d'image pour la photographie, il est un compromis entre me format gif et png, à la fois légèr et représenté parmi 16 millions de couleurs. Elles doivent être utilisées pour des images moyennes sans trop de contraste. L'extension est .jpg 
Png : format d'images s'affichant en seize millions de couleurs, pratique quand il s'agit de présenter des images grand format. Avec le soucis q'une qualité maximale. Le problème reste le poids de l'image et qui rends l'affichage de la page plus long. L'extension est .png
A noter également: Que les images doivent être numérisés en 72/dpi. C'est à dire en 72 point par inches. Le inches étand une unité de mesure anglaise.
Pour afficher une image la syntaxe est la suivante:
<img src="images/ma_photo.jpg" width="90" height="120" alt="le gars" />
A savoir que le dossier enfant s'appelle ci-dessus images et que l'image s'appelle ma_photo.jpg
Pour une image se trouvant sur un autre site à l'extérieur de celui-ci
<img src="http://www.terminal-media.fr/images/ma_photo.jpg" width="90" height="120" alt="le gars" />
A noter que seule dans la balise img l'attribut src (source) est obligatoire.
width : indique la largeur de l'image
height: indique la largeur.
alt: indique le texte alternatif qui s'affiche si l'image est absente.
Les images d'arrière-plan en CSS
Une couleur d'arrière-plan ou une image cela s'obtient en incluant dans le fichier css avec un sélecteur, la propriété, background-color: et la valeur red; ou background-color : et la valeur en héxadécimale #cc0000;   
Ce qui donne avec le code dans la feuille de style:
body { background-color : #cc0000; }
ou
pour une image d'arrière-plan:
body {  background-image: url ('arr-pln.gif');  }
Par défaut, l'image se répète jusqu'à remplir l'intégralité de l'arrière-plan du navigateur 
Si l'on souhaite ne pas répéter l'image rajoutez la propriété :
body {  background-image: url ('arr-pln.gif');              	      background-repeat: no-repeat;        }

Pour la répéter, ce qui est la valeur par défaut:
background-repeat: repeat; 
Si l'on souhaite répéter l'image uniquement à l'horizontale. Il faut préciser.
background-repeat: repeat-x;
ou pour à la verticale.
background-reapeat: repeat-y;

Positionner une image d'arrière-plan
Positionne une image au pixel près.  
body {  background-image: url ('arr-pln.gif');              	      background-position: 20px 20px; }

Défilement de l'image
Cette propriété permet de fixer une image alors que le reste de la page défile.
background-attachement: scroll;
background-attachement: fixed;
exemple :
 <!DOCTYPE html>
<html lang="fr> 
<head>
<meta charset="utf-8"> 
<title>HTML 5</title>
<style type="text/css">

body { background-image: url (interface/fond.jpg); 		     
            background-repeat: no-repeat;} 
            background-position: center center;     	     background-attachement: fixed;     }
.presentation  { text-align-center; }
</style>
</head>
<body>
<p  class="presentation" Un îlot de verdure, un jardin des plaisirs, quoi de plus pour vivre une incroyable aventure</p>
</body>
</html>
+++++++++++++++++++++++++++++
Le multimédia
L'insertion d'un fichier vidéo avec la balise <video>
La balise <vidéo> est une balise qui permet de diffuser de l'image vidéo accompagnés ou sans son. Maintenant, le Motion ExPert Group a définit une norme et avec mpeg, elle a aboutit  sur le format H264. Son extension est .mp4.
Voici la syntaxe de la balise avec ses attributs :
<video  controls autoplay loop preload src="video/h264/ma_video.mp4" width="400" height="260" poster="images/ecran.jpg"></video>

Voici les attributs cités dans cet exemple:
controls : cité, il permet d'afficher les éléments de contrôles de la vidéo. le bouton jouer, le volume du son, l'icône activé, désactivé.
src : l'abréviation de source, il indique le chemin qui mène à la vidéo, en l'occurence dans l'exemple le dossier video/h264 avec le fichier ma_video.mp4.
autoplay : présent, la vidéo se joue automatiquement au chargement de la page.
loop : le fichier une fois terminé recommence, il tourne en boucle.
preload : Il permet de faire télécharger le fichier au préalable dans le navigateur, ainsi, avant sa diffusion, il n'y a pas de temps d'attente.
poster : C'est une image que l'on place avant que le fichier vidéo ne soit joué. Dans l'exemple, le fichier se trouve dans le dossier image.
width : largeur de la vidéo.
height : hauteur de la vidéo
Plus le fichier est volumineux, plus, il est long à télécharger. Néanmoins, avec une connection haut débit l'on télécharge rapidement le fichier, même très lourd en terme de poids. Une fois, dans la mémoire de votre ordinateur ou téléphone, vous pourrez le consulter à loisir.

L'insertion d'un fichier audio avec la balise <audio>
Le fichier audio .mp3 a été également mis au point par le consortium des métiers de l'audiovisuels américains, le Motion ExPert Group, qui a mis au point le mpeg et notamment les fichiers audio .mp3,  là aussi, si la qualité sonore est équivalente à celle d'un cd (assez élévé), le fichier reste volumineux. Pourtant lors de son enregistrement avec des paramètres modifiables, l'on parvient à des taux de compression qui entraine la réduction de son poid en termes de grosseur de fichiers. Donc, l'avantage avec un fichier mp3 c'est la qualité qui est modifiable avec des petits logiciels utilitaires lors de l'enregistrement. Ainsi l'on peut déterminer, plusieurs qualités et par conséquent, donner au fichier un poids plus ou moins léger.
Voici un exemple de syntaxe de balise <audio> :                                   
<audio controls preload autoplay  loop src="mp3/mon_fichier_audio.mp3"  type="audio/mpeg"></audio> 

Et voici une description des attributs :
controls : cité, il permet d'afficher les éléments de contrôles du sonore. le bouton jouer, et le volume du son, activer ou désactiver.
src : l'abréviation de source, il indique le chemin qui mène au son, en l'occurence dans l'exemple le dossier audio/mp3 avec le fichier, au final mon_fichier_audio.mp3.
autoplay : présent, la vidéo se joue automatiquement au chargement de la page.
loop : Le fichier, une fois terminé recommence, il tourne en boucle.
preload : Il permet de charger le sonore au préalable dans le navigateur, ainsi, avant sa diffusion, il n'y a pas de temps d'attente. L'attribut preload est ignoré, si autoplay est présent.
++++++++++++++++++++++++++++++++++++++
Le texte en CSS
Décoration de texte
Cette propriété est une propriété de décoration de texte en css.
text-decoration: underline;
souligne le texte
ou
text-decoration: overline;
surligne le texte
ou
text-decoration: line-throught;
texte barré dans son milieu
ou
text-decoration: none;
aucune décoration de texte 
Transformation
Cette propriété permet indépendament de l'écriture dans le code source à une apparence dans le navigateur en majuscule ou minuscule.
text-transform: capitalize;
texte avec la première lettre du mot en majuscule

text-transform: uppercase;
texte tout en majuscule

text-transform: lowercase;
texte tout en minuscule

ou

text-transform: none;
aucune transformation de texte
Indentation
c'est un texte dont la première ligne se trouve en retrait par rapport au reste du texte.
la propriété text-indent sa valeur précise peut être exprimer en pixel , ou en valeur relative en pourcentage.
text-indent: 20px;
ou
text-indent: 2%;

Espaces entre les lettres
letter-spacing: 10px;
Espaces entre les mots
word-spacing: 10px;
Interligne
line-height: 12px;
Espaces vides
Cette propriétée permet de gérer les espaces vides tels qu'ils sont écrit dans le code source.
white-space: pre;
Alignement horizontal
text-align: center;
alignement texte centré
text-align: left;
alignement texte à gauche
text-align: right
alignement texte à droite
text-align: justify;
alignement texte justifié;
text-align: auto;
alignement texte par défaut
Alignement vertical
vertical-align: baseline;
alignement vertical par défaut
vertical-align: sub;
alignement vertical en dessous
vertical-align: super;
alignement vertical en haut

Longueur et hauteur
Pour définir la taille d'une boite, incluant du texte, il est utile d'en définir la largeur et la hauteur, exprimer en pixel ou en pourcentage.
Par exemple:
width: 320px;
height: 240px;
ou sinon
width: 60%;
height: 26%px;

Marqueurs de liste
Cela permet de définir l'apparence à une liste à puce <ul> différent marqueurs. 
list-style-type: disc;
cercle plein
list-style-type: circle;
cercle vide
list-style-type: square;
carré
ou une liste <ol>
list-style-type: decimal;
1,2,3
list-style-type: decimal-leading-zero;
01, 02, 03,
list-style-type: upper-roman;
I, II,III
list-style-type: lower-roman;
i,ii,iii
list-style-type: upper-alpha;
A,B,C
list-style-type: lower-alpha;
a, b, c,
Marqueur graphique
Marqueur avec une image
list-style-image: url ('votre_puce.gif');

Ces images peuvent être au format .gif, .jpeg ou .png
+++++++++++++++++++++++++++++++++++++
Les tableaux
les tableaux représente un élément crucials dans l'élaboration de document, nous allons donc vous donner ici les bases d'un tableau réussis.
Pour se faire créez un fichier .html avec le bloc-notes. recopiez votre ficher doctype minimal enregistrez-le et. 
Dans notre exemple ci-dessus la balise tableau se nomme ainsi :
<table> 
Et entre les deux balises <table> et </table> le tableau comporte une rangée qui s'ouvre avec <tr>  et qui se ferme avec </tr>. Puis la cellule <td> s'ouvre et l'on trouve le contenu, comme par exemple : toto, puis, elle se ferme avec </td>. et se termine par la balise de fermeture </table>
Donc, recopiez le code suivant :

<table>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>
Et dans les CSS, on il faut, pour bien faire, indiquer à notre sélecteur "table" : 
La largeur et la hauteur du tableau, l'alignement du contenu des cellules. 
Ce qui donne :
table { width: 320px;
            height: 240px;
            text-align: center;  }
et rajoutez :
td { border: solid 1px #000000; }
Qui est le raccourci de plusieurs valeurs pour la même propriété. Ci-dessus, border (bordure), solid (solide), (épaisseur) 1px, (couleur hexadécimale noire) #000000.
Avec pour résultat ceci :

La marge interieure des cellules
td { padding: 15px; }
ou 
td { padding-left: 15px; }
Et ce, sont toutes les données des cellules qui ont été déplacés de 15 pixels.

Les arrières plans de couleurs des tableaux
td { background-color: #cc0000; }              

La fusion des colonnes
Reprenez votre fichier qui contient votre tableau, rajoutez, remplacez-le code précédent, par celui-ci. 
<table>
<tr>
<td colspan="3">la fusion toutou</td>
</tr>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>

Vous obtenez ce résultat:
Cette propriété est donc colspan avec la valeur 3 qui correspond au nombre de colonne à fusionner.

Fusionnez des lignes

<table>
<tr>
<td rowspan="3">La fusion zozo</td>
<td>tutu</td>
<td>titi</td>
<td>tata</td>
</tr>
<tr>
<td>zuzu</td>
<td>zizi</td>
<td>zaza</td>
</tr>
</table>
Cette propriété est donc rowspan avec la valeur 3 qui correspond au nombre de cellule à fusionner.

Espace entres les cellules de tableaux en CSS
Une propriété qui permet de spécifier l'espacement entre chaque cellule.
border-spacing
mais reprenons notre exemple du fichier html
Celui-ci :

<table>
<tr>
<td rowspan="3">La fusion zozo</td>
<td>tutu</td>
<td>titi</td>
<td>tata</td>
</tr>
<tr>
<td>zuzu</td>
<td>zizi</td>
<td>zaza</td>
</tr>
</table>
Puis, créons un fichier CSS et reprenons l'exemple suivant :  
table { width: 320px;
            height: 240px;
            text-align: center; 
	    border-spacing: 20px; }

Les bordures des tableaux
Avec la propriété,  border-collapse nous supprimons, l'effet double bordure qui existe par défaut sur les tableaux.
Regardons l'exemple suivant: 
<style type="text/css">
table { width: 320px;
             text-align: center;
	     border: 1px solid gray;
	     border-collapse: collapse; }
    td {   border: solid 1px gray;   }	
</style>
<table>
<tr>
<td colspan="3">la fusion toutou</td>
</tr>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>

La légende dans un tableau
caption-side: top;
Légende au dessus du  tableau.
caption-side: bottom;
Légende en dessous du tableau.

+++++++++++++++++++++++++++++++++++++